class Popup{
    constructor(obj){
        if(typeof obj.el === 'string'){
            this.el = document.querySelector(obj.el)
        }else{
            this.el = obj.el
        }
        this.title = obj.title || '默认标题内容'
        this.content = obj.content || ''
    }
    $(ele){
        return document.querySelector(ele)
    }
    close(){
        let close = this.$('.close')
        close.addEventListener('click',()=>{
            this.div.style.display = 'none'
        })  
    }
}
class Alert extends Popup{
    constructor(obj){
        super(obj)
        this.alert()
    }
    alert(){
        this.el.addEventListener('click',()=>{
            this.div = this.$('.add')
            this.div.style.display = 'block'
            this.div.innerHTML = this.html()
            this.close()
            this.btn()
        })
    }
    html(){
        return `<div class="content">
                    <h3>${this.title}</h3>
                    <p>${this.content}</p>
                    <div><button>确定</button></div>
                    <div class="close">✖</div>
                </div>`
    }
    
    btn(){
        let btn = this.$('.content button')
        btn.addEventListener('click',()=>{
            this.div.style.display = 'none'
        })
    }
}
let alert1 = new Alert({
    el:'.alert1',
    content:'弹窗内容'
})
let alert2 = new Alert({
    el:'.alert2',
    title:'自己设置标题',
    content:'弹窗内容'
})
class Confirm extends Popup{
    constructor(obj){
        super(obj)
        this.btn = obj.btn || ['确认','取消']
        this.init()
    }
    init(){
        this.confirm()
    }
    confirm(){
        this.el.addEventListener('click',()=>{
            this.div = this.$('.add')
            this.div.style.display = 'block'
            this.div.innerHTML = this.html()
            this.close()
            this.btns()
        }) 
    }
    html(){
        return `<div class="content">
                    <h3>${this.title}</h3>
                    <p>${this.content}</p>
                    <div>${this.btn.map((item)=>{
                        return `<button>${item}</button>`
                     }).join('')}</div>
                    <div class="close">✖</div>
                </div>`
    }
    btns(){
        let btns = [...document.querySelectorAll('.add button')]
        btns.forEach((btn)=>{
            btn.addEventListener('click',()=>{
                confirm(`你点击了${btn.innerHTML}`)
                this.div.style.display = 'none'
            })
        })
    }
}
let confirm1 = new Confirm({
    el:'.confirm1',
    content:'操作成功'
})
let confirm2 = new Confirm({
    el:'.confirm2',
    title:'自定义标题',
    content:'操作成功',
    btn:['ok','no']
})
class Msg extends Popup{
    constructor(obj){
        super(obj)
        if(obj.icon === undefined){
            this.icon = ''
        }else{
            this.icon = obj.icon == 1? '✓' : '✖'
        }
        this.time = obj.time || 2000 
        this.color = obj.icon == 1? 'greey' : 'red'
        this.msg()
    }
    msg(){
        this.el.addEventListener('click',()=>{
            this.div = this.$('.add')
            this.div.style.display = 'block'
            this.div.innerHTML = `<div class="content1">
                                        <span>${this.icon}</span>
                                        <p>${this.content}</p>
                                    </div>`
            this.$('span').style.color = this.color
            setTimeout(()=>{
                this.div.style.display = 'none'
            },this.time)
        }) 
    }
}
let msg1 = new Msg({
    el:'.msg1',
    content:'提示的内容'
})
let msg2 = new Msg({
    el:'.msg2',
    icon:'1',
    content:'成功状态'
})
let msg3 = new Msg({
    el:'.msg3',
    icon:'0',
    time: 5000,
    content:'失败状态，5s后关闭'
})
class Load extends Popup{
    constructor(obj){
        super(obj)
        this.time = obj.time || 2000
        this.load()
    }
    load(){
        this.el.addEventListener('click',()=>{
            this.div = this.$('.add')
            this.div.style.display = 'block'
            this.div.innerHTML = ''
            setTimeout(()=>{
                this.div.style.display = 'none'
            },this.time)
        })
    }
}
new Load({
    el:'.load',
    time:5000
})
